/**
 * 一个奇葩的瀑布流组件
 * 组件暂时只支持双列流
 */
Component({
  externalClasses: ["extra-class", ],
  properties: {
    // 流间距
    gapWidth: {
      type: Number,
      value: 10
    },
    // 数据
    items: {
      type: Array,
      value: [],
      observer: function (newVal, oldVal) {
        // this._readyData = this._readyData.concat(newVal.slice(oldVal.length, newVal.length));
        this._readyData.push.apply(this._readyData, newVal);
        // 仅在追加时或数据异步时执行这个render
        if (oldVal.length > 0 || this._isReadyRender) {
          this._render();
        }
      }
    },

  },

  data: {
    // 流数（当前只支持两条流）
    fallNum: 2,
    // 分流后数据
    itemArray: []
  },

  created() {
    // 待渲染数据
    this._readyData = [];
    // 当前激活流
    this._activeFall = 0;
  },

  attached() {
    /**
     * 数据初始化
     */
    this.setData({
      itemArray: Array(this.data.fallNum).fill().map(() => [])
    });
  },

  ready() {
    // 首次渲染数据
    this._render();
    // 主要用于处理异步数据
    this._isReadyRender = true;
    // 添加监听器（需要写在ready里，否则基础库2.7.1（含）以下不生效）
    // https://developers.weixin.qq.com/community/develop/doc/000e20e79ecf789290399941a51000
    this._addOberver();
  },

  detached() {
    // 组件移除断开监听器
    for (const o of this._obervers) {
      o.disconnect();
    }
  },

  methods: {
    /**
     * 添加触达监听
     */
    _addOberver() {
      // 存储监听器
      this._obervers = [];
      // 首排标识
      let flag = 1;
      for (let i = 0; i < this.data.fallNum; i++) {
        const o = this.createIntersectionObserver();
        o.relativeTo('.detector').observe(`.f-l${i}`, res => {
          // 判断渲染流
          if (flag < this.data.fallNum) {
            this._activeFall++;
            this._render();
            flag++;
          } else if (res.intersectionRatio === 0) {
            this._activeFall = i;
            this._render();
          } else {
            this._activeFall = 0;
          }
        });
        this._obervers.push(o)
      }
    },

    /**
     * 数据分流渲染
     */
    _render() {
      if (this._readyData.length > 0) {
        const i = this.data.itemArray[this._activeFall].length;
        this.setData({
          [`itemArray[${this._activeFall}][${i}]`]: this._readyData.shift()
        }, () => {
          // 超时处理
          clearTimeout(this._renderTimeout);
          this._renderTimeout = setTimeout(() => {
            this._render();
          }, 100);
        });
      }
    },
    onTapItem(e) {
      const dataset = e.currentTarget.dataset;
      this.triggerEvent('contenttap', dataset, {});
    },
    recommend(activeFall, items) {

      // 待渲染数据
      this._readyData = [];

      /**
       * 数据初始化
       */
      this.setData({
        itemArray: Array(this.data.fallNum).fill().map(() => []),
        // 流数（当前只支持两条流）
        fallNum: 2,
      });

      /**
       * 填装数据
       */
      items.forEach(e => {
        this._readyData.push(e);
      })

      // 渲染不会走监听器，所以自己笨方法渲染
      this._refreshRender();

    },
    _refreshRender() {
      for (let i = 0; i < this._readyData.length; i++) {
        this._activeFall = i % 2 === 0 ? 1 : 0;
        const i = this.data.itemArray[this._activeFall].length;
        this.setData({
          [`itemArray[${this._activeFall}][${i}]`]: this._readyData.shift()
        }, () => {
          // 回调函数
        });
      }
    },
    clearFall() {
      /**
       * 数据初始化
       */
      this.setData({
        itemArray: Array(this.data.fallNum).fill().map(() => []),
        // 流数（当前只支持两条流）
        fallNum: 2,
      });
    }
  }
});